<template>
  <view class="demo-container">
    <!-- 基础用法 -->
    <view class="demo-block">
      <view class="demo-block__title">基础用法</view>
      <view class="demo-block__content">
        <fu-button type="primary" @click="show1 = true">显示通知</fu-button>
        <fu-notify
          v-model:show="show1"
          message="这是一条通知信息"
        />
      </view>
    </view>
    
    <!-- 不同主题 -->
    <view class="demo-block">
      <view class="demo-block__title">不同主题</view>
      <view class="demo-block__content">
        <fu-button type="primary" @click="show2 = true" class="button-item">主要通知</fu-button>
        <fu-button type="success" @click="show3 = true" class="button-item">成功通知</fu-button>
        <fu-button type="warning" @click="show4 = true" class="button-item">警告通知</fu-button>
        <fu-button type="danger" @click="show5 = true" class="button-item">错误通知</fu-button>
        <fu-notify
          v-model:show="show2"
          type="primary"
          message="这是一条主要通知"
        />
        <fu-notify
          v-model:show="show3"
          type="success"
          message="这是一条成功通知"
        />
        <fu-notify
          v-model:show="show4"
          type="warning"
          message="这是一条警告通知"
        />
        <fu-notify
          v-model:show="show5"
          type="error"
          message="这是一条错误通知"
        />
      </view>
    </view>
    
    <!-- 自定义时长 -->
    <view class="demo-block">
      <view class="demo-block__title">自定义时长</view>
      <view class="demo-block__content">
        <fu-button type="primary" @click="show6 = true">自定义时长</fu-button>
        <fu-notify
          v-model:show="show6"
          message="这条通知会显示 5 秒"
          :duration="5000"
        />
      </view>
    </view>
    
    <!-- 不显示图标 -->
    <view class="demo-block">
      <view class="demo-block__title">不显示图标</view>
      <view class="demo-block__content">
        <fu-button type="primary" @click="show7 = true">不显示图标</fu-button>
        <fu-notify
          v-model:show="show7"
          message="这条通知不显示图标"
          :show-icon="false"
        />
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      show1: false,
      show2: false,
      show3: false,
      show4: false,
      show5: false,
      show6: false,
      show7: false
    }
  }
}
</script>

<style lang="scss" scoped>
.demo-container {
  padding: 20rpx;
}

.demo-block {
  margin-bottom: 30rpx;
  
  &__title {
    margin-bottom: 20rpx;
    font-size: var(--fu-font-size-lg);
    color: var(--fu-text-color);
  }
  
  &__content {
    background-color: #fff;
    border-radius: var(--fu-radius-base);
    overflow: hidden;
    padding: 30rpx;
  }
}

.button-item {
  margin-right: 20rpx;
  margin-bottom: 20rpx;
  
  &:last-child {
    margin-right: 0;
  }
}
</style> 